<template>
  <TitleCard :title="titleCard" :showMore="showMore">
    <div class="backStack-table-wrap oprationStatis">
      <TableHeader
        :allAccumulaNum="allAccumulaNum"
        :databaseNum="databaseNum"
      ></TableHeader>
      <TitleCard
        title="产业特色专利数据库使用情况统计"
        :showMore="showMore"
        :type="'firstCard'"
        class="firstTitle"
      >
        <TitleCard
          title="使用情况明细"
          :showMore="false"
          :isSwitch="false"
          :type="'threeCard'"
        >
          <Table
            class="mt20 mb20"
            ref="table"
            :options="fields"
            :tableValue="tableValue"
            :customSlotOpt="slotOpt"
            :otherOpt="customOtherOpt"
            :rowSelection="null"
            @change="initTableValue"
            @actionClick="handlerActionClick"
          ></Table>
        </TitleCard>
        <TitleCard
          title="使用人次统计概览"
          :showMore="false"
          :isSwitch="false"
          :type="'threeCard'"
        >
          <Bar></Bar>
        </TitleCard>
      </TitleCard>
      <TitleCard
        title="在线业务办理情况统计"
        :showMore="showMore"
        :type="'firstCard'"
      >
        <TitleCard
          title="使用情况明细"
          :showMore="false"
          :isSwitch="false"
          :type="'threeCard'"
        >
          <DataCard class="mt20" :dataCardList="dataCardList"></DataCard>
        </TitleCard>
        <TitleCard
          title="使用人次概览"
          :showMore="false"
          :isSwitch="false"
          :type="'threeCard'"
        >
          <BarPlus></BarPlus>
        </TitleCard>
      </TitleCard>
    </div>
  </TitleCard>
</template>

<script>
import Table from '../../components/table/index.vue'
import TableHeader from './components/tableHeader.vue'
import mixinsBackStack from '@/views/backstageSupport/mixins'
import { fields, slotOpt } from './configs/configs.js'
import Bar from './components/bar.vue'
import BarPlus from './components/barPlus.vue'
import DataCard from './components/dataCard.vue'
import { getOprationStatistics, getDateBase } from '@/api/oprationStatistics'
import { dataCardList } from './configs/configs'

export default {
  mixins: [mixinsBackStack],
  data() {
    return {
      fields,
      slotOpt,
      customOtherOpt: {
        pagination: {
          total: 0,
          pageNum: 1,
          pageSize: 10
        }
      },
      tableValue: [],
      dataCardList,
      allAccumulaNum: 0,
      databaseNum: 0
    }
  },
  components: {
    TableHeader,
    Table,
    Bar,
    DataCard,
    BarPlus
  },
  mounted() {
    this.initTableValue(),
      this.initDataCard()
  },
  methods: {
    async initDataCard() {
      const all = await getOprationStatistics({})
      const day = await getOprationStatistics({ searchValue: '1' })
      let allAccumulaNum = 0
      all.data.forEach(item => {
        this.dataCardList.forEach(element => {
          if (element.operUrl === item.operUrl) {
            element.accumulaNum = item.count
          }
        })
        allAccumulaNum += Number(item.count)
      });
      this.allAccumulaNum = allAccumulaNum
      this.dataCardList.forEach(element => {
        day.data.forEach(item => {
          if (element.operUrl === item.operUrl) {
            element.dayNum = item.count
          }
        })
      });
    },
    async initTableValue() {
      try {
        this.loadingTable(true) // 开启表格的加载动画
        const params = this.handlerBeforeRequestParams()
        const { rows, total } = await getDateBase(params) // 请求表格数据接口
        const row = this.handlerDateFormat(rows) // 处理时间格式
        this.handlerResultMappings(rows) // 处理数据的映射关系
        this.tableValue = row
        this.customOtherOpt.pagination.total = total
        this.databaseNum = total
        this.initSelectedRowIds() // 清空勾选的选项
      } catch (error) {
        this.$apiStatusHandler(99, error.msg) // 请求异常，则全局轻提示
      } finally {
        this.loadingTable(false)
      }
    },
    handlerBeforeRequestParams() {
      const { pagination } = this.$refs.table
      const { pageSize, pageNum } = pagination
      const params = {
        pageNum,
        pageSize
      }
      return params
    },
  }
}
</script>
